<template>

	<view >
		<!-- 头部 -->
		<!-- <view class="head">
			<image src="../../../static/firm/back.png" class="back_img" @tap="headBack()"></image>
			<text class="head_text">企业</text>
		</view>
		<view style="height: 1px; background-color: #F7F7F7;"> </view> -->
		<!-- 导航栏 -->
		<view class="nav">
			<text class="nav_text" style="margin-left: 31rpx;" @click="navClick(0)">我加入的企业</text>
			<text class="nav_text" style="margin-left: 98rpx;" @click="navClick(1)">创建企业</text>
			<text class="nav_text" style="margin-left: 102rpx;" @click="navClick(2)">申请加入企业</text>
			<view class="nav_line" :style="nav_line_left"></view>
		</view>
		<!-- 内容滑动区 -->
		<swiper class="swiper_base" @change="swiperChange" :current="swiper_item_index" :style="{height: bodyHeight + 'px' }">
			<!-- 我加入的企业 -->
			<swiper-item>
				<view class="swiper-item1">
					<!-- 企业展示条目 -->
					<view class="firm_msg" v-for="item in myJoinList" @click="handleGoIndex(item)">
						<image class="firm_msg_img" :src="item.company_logo"></image>
						<text class="firm_msg_text">{{item.company_name}}</text>
						<image src="../../../static/firm/back2.png" class="back_img2"></image>
					</view>
				</view>
			</swiper-item>
			<!-- 创建企业 -->
			<swiper-item >
				<view style="height: 20rpx; background-color: #F7F7F7;"></view>
				<view class="swiper-item2" >
					<form @reset="cancel()" @submit="commit()">
						<!-- 企业名称 -->
						<view class="firm_item">
							<image src="../../../static/firm/icon_gs.png" class="firm_img"></image>
							<text class="firm_text">企业全称:</text>
							<input type="text" v-model="creatForm.company_name" placeholder="请输入企业名称"
								style="margin-left: 55rpx; margin-top: 20rpx;" />
						</view>
						<!-- 企业LOGO -->
						<view class="firm_item" style="height: 218rpx;">
							<image src="../../../static/firm/icon_tp.png" style="margin-top: 40rpx;" class="firm_img">
							</image>
							<text class="firm_text" style="top: 40rpx;">企业LOGO:</text>
							<view class="firm_tj" v-if="!creatForm.company_logo">
								<image src="../../../static/firm/tj.png" @click="selectImg"
									style="width:40rpx; height:40rpx; margin-top: 17rpx;"></image>
							</view>
							<image v-else @click="selectImg"
								style="display: block;margin-left:75rpx; margin-top:30rpx;width:80rpx;height:80rpx;border-radius: 40rpx;"
								:src="creatForm.company_logo" mode=""></image>
							<view style="position: absolute;top: 130rpx; left: 174rpx;" @click="selectImg">
								<image src="../../../static/firm/icon_sc.png" style="width: 25rpx; height: 19rpx;">
								</image>
								<text style="font-size: 20rpx; color: #128BF1;margin-left: 10rpx;">点击上传文件</text>
							</view>

						</view>
						<!-- 企业简介 -->
						<view class="firm_item" style="height: auto; border-bottom: none;">
							<image src="../../../static/firm/icom_jj.png" class="firm_img" style="margin-top: 65rpx;">
							</image>
							<text class="firm_text" style="top: 65rpx;">企业简介:</text>
							<textarea v-model="creatForm.content" class="textar" maxlength="-1" auto-height="true"/>
						</view>
						<!-- 底部按钮 -->
						<view class="bottom">
							<button class="bottom_btn" style="background: #CCCCCC; width: 380rpx;"
								form-type="reset">取消</button>
							<button class="bottom_btn"
								style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
								@click="addCompanySubmit" form-type="submit">确定</button>
						</view>
					</form>
				</view>
			</swiper-item>
			<!-- 申请加入企业 -->
			<swiper-item>
				<view class="swiper-item3">
					<!-- 搜索框 -->
					<view class="firm_serch">
						<!-- <image src="../../../static/firm/search.png" class="search_img" v-show="search_img_show">
						</image>
						<input class="search_bar" placeholder="搜索企业名称" placeholder-class="firm_text" @input="inputInput"
							@confirm="search" @blur="searchBlur" placeholder-style="color:#B2B2B2" /> -->
						<uni-easyinput class="modifyInputWzh" prefixIcon="" v-model="searchInfo"
							placeholder="输入企业名称" @iconClick="getCompanyList">
							</uni-easyinput>
							<view class="firm_searh_btn" @click="getCompanyList">
								搜索
							</view>
					</view>
					<!-- 企业展示条目 -->
					<view class="firm_msg" v-for="item in companyList" @click="jionFirm(item.company_id)">
						<image class="firm_msg_img" :src="item.company_logo"></image>
						<text class="firm_msg_text">{{item.company_name}}</text>
						<image src="../../../static/firm/back2.png" class="back_img2"></image>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// import {
	// 	pathToBase64,
	// 	base64ToPath
	// } from 'image-tools'
	export default {
		data() {
			return {
				token: '',
				member_id: '',
				// 我加入的企业
				myJoinList: [],
				// 企业列表
				companyList: [],
				// 搜索企业信息
				searchInfo: '',
				// 创建企业表单
				creatForm: {
					company_name: '',
					company_logo: '',
					content: '',
				},
				bodyHeight: '', // 把页面高度定成视口高度
				bodyWidth: '',
				nav_line_left: "margin-left: 78rpx;", // 导航指示线位置78,330,584
				swiper_item_index: 0, //滑动内容索引
				search_img_show: true, //控制搜索栏放大镜是否显示
			}
		},
		async onLoad() {
			this.bodyHeight = uni.getSystemInfoSync().windowHeight - 44; // 把页面高度定成视口高度
			this.bodyWidth = uni.getSystemInfoSync().windowWidth;
			this.token = uni.getStorageSync('btlh_process_token') || ''
			this.member_id = uni.getStorageSync('btlh_process_member_id') || ''
			this.getMyJoinList()
			// this.getCompanyList()
			console.log('rirm')
		},
		methods: {
			handleGoIndex(item) {
				// console.log(item)
				uni.removeStorageSync('cache_department_id');
				uni.removeStorageSync('cache_department_name');
				uni.removeStorageSync('cache_department_model');
				uni.setStorage({
					key: 'bthl_process_LoginCompanyId',
					data: item.company_id
				})
				uni.setStorage({
					key: 'bthl_process_LoginCompanyName',
					data: item.company_name
				})
				uni.setStorage({
					key: 'bthl_process_LoginCompanyLogo',
					data: item.company_logo
				})
				uni.setStorage({
					key: 'cache_department_model',
					data: item.department_model
				})
				uni.switchTab({
					url: `/pages/project/project`
				})
			},
			async addCompanySubmit() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Company/create',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_name: this.creatForm.company_name,
						company_logo: this.creatForm.company_logo,
						content: this.creatForm.content,
					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				this.swiper_item_index = 0
				this.getMyJoinList()
			},
			selectImg() {
				console.log(123)
				var that = this
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: async (res) => {

						const tempFilePaths = res.tempFilePaths;
						that.phone = res.tempFilePaths[0]
						uni.uploadFile({
							url: 'https://control.sxpz.vip/index.php/AppApi/User/uploadImg',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'member_id': this.member_id,
								'token': this.token,
							},
							success: uploadFileRes => {
								const result = JSON.parse(uploadFileRes.data)
								this.creatForm.company_logo = result.datas.img_url
							}
						})
					}
				});
			},
			// *获取企业列表
			async getCompanyList() {


				const {
					data: res
				} = await this.$myRequest({
					url: 'Company/search',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						search: this.searchInfo,
					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				console.log('res', res);
				this.companyList = res.datas.listInfo
				if(res.datas.listInfo.length == 0){
					uni.showToast({
						title:'无搜索内容',
						icon:'none'
					})
				}
				console.log('企业列表', this.companyList)
			},
			// *获取我加入的企业
			async getMyJoinList() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Company/index',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
					},

				})
				if (res.code != 200){
					uni.showToast({
						title: res.datas.msg,
						icon: 'none'
					})
					
					return uni.redirectTo({
						url:'../index'
					})
				} 
				console.log('res', res);
				this.myJoinList = res.datas.listInfo
				console.log('我加入的企业', this.myJoinList)

			},
			/*
				搜索框失去焦点时触发,
				输入框无内容显示放大镜
			 */
			searchBlur(e) {
				e.detail.value === '' ? this.search_img_show = true : this.search_img_show = false
			},
			/*
				搜索框点击完成时触发
			 */
			search(e) {
				console.log(e.detail.value)
			},
			/* 
			搜索框输入时触发,使放大镜隐藏
			 */
			inputInput() {
				this.search_img_show = false
			},
			/* 
			 申请加入企业
			 点击企业条目弹出确认对话框
			 */
			jionFirm(id) {
				uni.showModal({
					title: '提示',
					content: '确定申请加入吗?',
					success: async (res) => {
						if (res.confirm) {
							console.log('用户点击确定');


							const {
								data: res
							} = await this.$myRequest({
								url: 'Company/apply_to_join',
								method: 'POST',
								data: {
									member_id: this.member_id,
									token: this.token,
									company_id: id,
								},

							})
							if (res.code != 200) return uni.showToast({
								title: res.datas.msg,
								icon: 'none'
							})
							uni.showToast({
								title: res.datas.msg,
								icon: 'none'
							})


						} else if (res.cancel) {
							// 取消
						}
					}
				})
			},
			/* 
			 点击导航栏切换显示内容,
			 点击切换时也会触发下方滑动事件
			 */
			navClick(n) {
				switch (n) {
					case 0:
						this.swiper_item_index = 0
						this.getMyJoinList()
						break;
					case 1:
						this.swiper_item_index = 1
						break;
					case 2:
						this.swiper_item_index = 2
						break;
				}
			},
			/* 
			 内容滑动时更改指示线显示位置
			 */
			swiperChange(e) {
				this.swiper_item_index = e.detail.current
				switch (this.swiper_item_index) {
					case 0:
						this.nav_line_left = "margin-left: 78rpx;"
						break;
					case 1:
						this.nav_line_left = "margin-left: 330rpx;"
						break;
					case 2:
						this.nav_line_left = "margin-left: 584rpx;"
						break;
				}
			},
			/* 
			 *创建企业点击取消 
			 */
			cancel() {

			},

			/*
			 *创建企业点击取确定
			 */
			commit() {

			},

			/* 
			 头部返回按钮
			 */
			headBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		},

	}
</script>

<style>
	
	.firm_msg_text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.firm_msg_img {
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
		margin-left: 31rpx;
		margin-top: 20rpx;
	}

	.firm_msg {
		width: 100%;
		height: 102rpx;
		background: #FFFFFF;
		border: 5rpx solid #F7F7F7;
		display: flex;
		position: relative;
	}

	.search_img {
		width: 28rpx;
		height: 27rpx;
		position: absolute;
		left: 277rpx;
		top: 45rpx;
	}

	.search_bar {
		width: 690rpx;
		height: 72rpx;
		background: #FFFFFF;
		box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
		border-radius: 36px;
		text-align: center;
		margin-left: 5%;
	}

	.firm_serch {
		width: 100%;
		height: 102rpx;
		background: #F7F7F7;
		padding-top: 20rpx;
		padding-left: 30rpx;
		display: flex;
		flex-direction: row;
	}
	
	/* 企业搜索按钮 */
	.firm_searh_btn{
		width: 90rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28rpx;
		background-color: #007AFF;
		border-radius: 0 36rpx 36rpx 0;
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
	}

	.bottom_btn {
		width: 375rpx;
		height: 88rpx;
		margin-left: 0;
		border-radius: 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.textar {
		width: 635rpx;
		height: 305rpx;
		background: #F7F7F7;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}

	.firm_img {
		width: 35rpx;
		height: 33rpx;
		margin-top: 40rpx;
	}

	.firm_tj {
		width: 80rpx;
		height: 80rpx;
		background: #ECEEF0;
		border-radius: 50%;
		margin-top: 30rpx;
		margin-left: 75rpx;
		text-align: center;
	}

	.firm_text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 20rpx;
		position: absolute;
		top: 40rpx;
	}

	.firm_item {
		width: 690rpx;
		height: 152rpx;
		margin-left: 30rpx;
		border-bottom: solid 1px #E3E3E3;
		position: relative;
	}

	.swiper_base {
		width: 100%;
		/* height: 1117rpx; */
	}

	.nav_line {
		width: 90rpx;
		height: 4rpx;
		background: #40A0F2;
		border-radius: 2px;
		position: absolute;
		bottom: 4rpx;
	}

	.nav {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
	}

	.nav_text {
		width: auto;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.head {
		width: 100%;
		height: 128rpx;
	}

	.back_img {
		width: 31rpx;
		height: 25rpx;
		margin-top: 69rpx;
		margin-left: 30rpx;
	}

	.back_img2 {
		width: 14rpx;
		height: 28rpx;
		position: absolute;
		top: 40rpx;
		right: 30rpx;
	}

	.head_text {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		margin-top: 64rpx;
		margin-left: 281rpx;
	}

	.modifyInputWzh .uni-easyinput {
		width: 590rpx !important;
		margin: 0 auto;
	}

	.modifyInputWzh .uni-easyinput__content {
		border-radius: 36rpx 0 0 36rpx !important;
		border: none !important;
		background-color: #fff;
		box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.1);
		justify-content: center !important;
	}

	.upLoadImgWzh {}
</style>
